<template>
  <view class="index">
    <text>{{ msg }}</text>
    <view v-for="(item, index) in dataList" :key="index" class="list-item">
      数据项 {{ item }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';

const msg = ref('Hello world');
const dataList = ref<number[]>([]);

// 模拟数据加载
const fetchData = () => {
  return new Promise<number[]>((resolve) => {
    setTimeout(() => {
      const newData = Array.from({ length: 10 }, (_, i) => Math.floor(Math.random() * 100));
      resolve(newData);
    }, 1000); // 模拟网络请求延迟
  });
};

// 页面加载时获取初始数据
onMounted(async () => {
  dataList.value = await fetchData();
});

// 监听下拉刷新事件
Taro.usePullDownRefresh(async () => {
  console.log('触发下拉刷新');
  // 执行数据刷新操作
  dataList.value = await fetchData();
  // 数据刷新完成后，停止下拉刷新动画
  Taro.stopPullDownRefresh();
  console.log('下拉刷新完成');
});
</script>

<style>
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  width: 500rpx;
  height: 180rpx;
  border: solid 1px #000;
  background: #eee;
  margin-bottom: 10rpx;
}
</style>